<template>
    <BlogHeader/>
    <div id="user-center">
        <h3>提交宿舍订单</h3>
        <form>
    <div class="form-select">
        <label>5号楼1单元<input type="radio" v-model="unit" value="5 1"/></label>
        <label>5号楼2单元<input type="radio" v-model="unit" value="5 2"/></label>
        <label>8号楼1单元<input type="radio" v-model="unit" value="8 1"/></label>
        <label>8号楼2单元<input type="radio" v-model="unit" value="8 2"/></label>
        <label>13号楼1单元<input type="radio" v-model="unit" value="13 1"/></label>
        <label>13号楼2单元<input type="radio" v-model="unit" value="13 2"/></label>
        <label>14号楼1单元<input type="radio" v-model="unit" value="14 1"/></label>
        <label>14号楼2单元<input type="radio" v-model="unit" value="14 2"/></label>
        <p>已选：{{unit}}</p>
    </div>
    <div class="form-elem">
        <span>同住人1：</span>
        <input v-model="order_roommate1" type="text" placeholder="输入同住人1">
    </div>

    <div class="form-elem">
        <span>同住人2：</span>
        <input v-model="order_roommate2" type="text" placeholder="输入同住人1">
    </div>

    <div class="form-elem">
        <span>同住人3：</span>
        <input v-model="order_roommate3" type="text" placeholder="输入同住人1">
    </div>

    <div class="form-elem">
        <button v-on:click.prevent="changeInfo">更新</button>
    </div>
        </form>
    </div>
    <BlogFooter/>
</template>

<script>
    import axios from 'axios';
    import BlogHeader from '@/components/BlogHeader.vue';

    import authorization from '@/utils/authorization';

    export default {
        name: 'PlaceoRDER',
        components: {BlogHeader},
        data: function () {
            return {
                order_unitID: '',
                order_roommate1: '',
                order_roommate2: '',
                order_roommate3: '',
                order_response: null,
            }
        },
        methods: {
            roomSelect() {
                const that = this;
                // 验证登录状态
                authorization()
                    .then(function (response) {
                        // 检查登录状态
                        // 若登录已过期则不执行后续操作
                        if (!response[0]) {
                            alert('登录已过期，请重新登录');
                            return
                        }
                        console.log('room selection start');
                        // 密码不能小于 6 位
                        // 发送更新数据到接口
                        axios
                            .post('/select', {
                                select: this.order_unitID,
                                mate1: this.order_roommate1,
                                mate2: this.order_roommate2,
                                mate3: this.order_roommate3,
                            })
                            .then(function (response) {
                                that.order_response = response.data;
                                alert('资料更新成功！');
                            })
                            .catch(function (error) {
                                alert(error.message);
                            });
                    });
            }
        },
    }
</script>

<style scoped>
    #user-center {
        text-align: center;
    }
    .form-elem {
        padding: 10px;
    }
    input {
        height: 25px;
        padding-left: 10px;
    }
    button {
        height: 35px;
        cursor: pointer;
        border: none;
        outline: none;
        background: gray;
        color: whitesmoke;
        border-radius: 5px;
        width: 200px;
    }
    form-select{
        margin-top: 20px;
    }
</style>